<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title >KSS V1.0</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.arctic.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../layer/layer-1.8.5.min.js"></script>
<script type="text/javascript" src="../../scripts/myjs.js"></script>   
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript">
	$(document).ready(
			function() {

				$('#jqxTabs').jqxTabs({ width: '100%', height: '100%', position: 'top' });
				$('#jqxTabs').jqxTabs({ selectionTracker: true });
				
				$("#jqsect").load("sectconfigList.htm");
				//$("#jqbody").load("path.do");
				
			});
</script>
<style type="text/css">
#Container{
	width: 100%;
	margin: 0 auto;
	background-color: #CCC;
	height: 100%;
}

#Header{
	height: 55px;
	background-color: #FFC;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}

#logo{
	height:80px;
    padding-left:50px;
    padding-top:10px;
    padding-bottom:10px;
}

#Content{
	height: 640px;
	/*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
	margin-top: 10px;
	background-color: #FFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}

#Content-Left{
    height:400px;
    width:200px;
    margin:20px;/*设置元素跟其他元素的距离为20像素*/
    float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
    background:#90C;
}

#Content-Main{
    height:400px;
    width:720px;
    margin:20px;/*设置元素跟其他元素的距离为20像素*/
    float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
    background:#90C;
}

/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/

#Footer{
	height: 30px;
	margin-top: 10px;
	text-align: center;
	background-color: #FFC;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}

.Clear{
    clear:both;
}

.jtabMargin{
	overflow: hidden;
}

</style>
</head>

<body>
<div id="Container">
    <div id="Header">
        <div id="logo">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="70%" height="35">KSS System</td>
              <td width="15%">Welcome</td>
              <td width="15%"><input type="button" name="btnLogin" id="btnLogin" value="退出" /></td>
            </tr>
          </table>
        </div>
	</div>   
    <div id="Content">
        <div id="jqxTabs">
            <ul>
                <li style="margin-left: 30px;">SECT</li>
                <li>Other</li>
          </ul>
 		<div class="jtabMargin">
            <div id="jqsect" style="height: 99%;">
            </div>
        </div>   
        <div class="jtabMargin">
            other
        </div>        
	</div>
    <div class="Clear">

    <!--如何你上面用到float,下面布局开始前最好清除一下。--></div>
    <div id="Footer">CopyRight: Bestv 2015-2016</div>
</div>
</body>
</html>
